<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<script type="text/javascript" src="js/jQuery.js">
			
		</script>
		<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js">
			
		</script>
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js">
			
		</script>
		<style type="text/css">
			html, body{
				width: 100%;
				height: 100%;
				
			}		
			.wrap{
				width: 100%;
				height: 100%;
			}
			.s1{
				background: orange;
			}
			.s2{
				background: red;
			}
			.s3{
				background: blue;
			}
		</style>
	</head>
	<body>
		<!--<input type="button" name="btn" id="btn" value="点击查询" />-->
		<div class="swiper-container wrap">
			<div class="swiper-wrapper"> 
				<div class="swiper-slide s1">Slide 1</div> 
				<div class="swiper-slide s2">Slide 2</div> 
				<div class="swiper-slide s3">Slide 3</div> 
			</div> 
			<!-- 如果需要分页器 --> 
			<div class="swiper-pagination"></div>
			 <!-- 如果需要导航按钮 --> 
			<div class="swiper-button-prev"></div> 
			<div class="swiper-button-next"></div> 
			<!-- 如果需要滚动条 --> 
			<div class="swiper-scrollbar"></div> 
		</div> 
	</body>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				$.ajax({
					type:"get",
					url:"https://sclub.jd.com/comment/productPageComments.action?productId=1484242450&score=0&sortType=3&page=1&pageSize=10",
					async:true,
					dataType:'jsonp',
					jsonpCallback:'fetchJSON_comment98vv260',
					success:function(data){
						console.log(data);
					}
				});
			});
		})
	</script>
	<script> 
		var mySwiper = new Swiper ('.swiper-container', { 
		loop: true,autoplay:1000,effect:'fade',direction:'horizontal',
		
		// 如果需要分页器
		 pagination: '.swiper-pagination', 
		
		// 如果需要前进后退按钮 
		nextButton: '.swiper-button-next', 
		prevButton: '.swiper-button-prev', 
		
		// 如果需要滚动条
		scrollbar: '.swiper-scrollbar',
			onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit 		
			swiperAnimateCache(swiper); //隐藏动画元素 		swiperAnimate(swiper); //初始化完成开始动画
		}, 
		onSlideChangeEnd: function(swiper){
		 	swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		} 

		}) 
	</script>

</html>
